body{
	font-family:'Microsoft Yahei';
}

/*这是一种想要使得上下栏固定，中间移动显示内容，类似于手机浏览器的方法*/
.main_wrap{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background-color:gold;
}

.header{
	height:2.5rem;
	background-color:#37ab40;
	position:relative;
}

.header .logo{
	display:block;
	width:4.45rem;
	height:1.8rem;
	margin:0.35rem auto 0;

}

/*因为图片是自动适应长宽比例的，所以设置width为100%就可以使图片适应当前容器*/
.header .logo img{
	width:100%;
}

/*雪碧图用定位来做*/
.header .search{
	position:absolute;
	width:1.35rem;
	height:1.35rem;
	right:0.75rem;
	top:0.625rem;
	background:url(../images/icons.png) left top no-repeat;
	background-size:3rem 42rem;
}


.center_wrap{
	position:absolute;
	left:0;
	right:0;
	top:2.5rem;
	bottom:2.5rem;

	/*overflow可以分为overflow-x和overflow-y来设定左右不可滑动,仅支持上下*/
	overflow-x:hidden;
	overflow-y:auto;
	background-color:#efefef;
}


.slide img{
	width:100%;
}

.menu_con{
	height:9.25rem;
	background-color:#fff;
	margin-top:0.5rem;
	overflow:hidden;
}

.menu{
	width:19rem;
	height:8.1rem;
	margin:0.7rem 0 0 1.375rem;	
}

.menu li{
	width:2.8rem;
	height:4.1rem;
	float:left;
	margin-right:1.625rem;
}

.menu li a{
	/*因为a标签为行内元素,如果想要给定一个在容器内的固定位置,就要将其转化为块元素*/
	display:block;

	width:2.8rem;
	height:2.8rem;
	background:url(../images/icons.png) left -3rem no-repeat;
	background-size:3rem 42rem;
}

.menu li h2{
	height:1.3rem;
	font:13px/1.3rem 'Microsoft Yahei';
	color:#666;
	text-align:center;
}


.menu li:nth-child(2) a{
	background-position:left -6rem;
}
.menu li:nth-child(3) a{
	background-position:left -9rem;
}
.menu li:nth-child(4) a{
	background-position:left -12rem;
}
.menu li:nth-child(5) a{
	background-position:left -15rem;
}
.menu li:nth-child(6) a{
	background-position:left -18rem;
}
.menu li:nth-child(7) a{
	background-position:left -21rem;
}
.menu li:nth-child(8) a{
	background-position:left -24rem;
}


.common_model{
	background-color:#fff;
	margin:0.5rem 0;
}

.common_title{
	width:17.75rem;
	height:0.9rem;
	margin:0.8rem auto 0;	
}

.common_title h3{
	border-left:0.25rem solid #fbc83d;
	font:bold 15px/0.9rem 'Microsoft Yahei';
	color:#fbc83d;
	text-indent:0.4rem;
}

.common_title a{
	font:12px/0.9rem 'Microsoft Yahei';
	color:#7f7f7f;
}

.banner{
	width:17.75rem;
	height:4.5rem;
	margin:0.5rem auto 0;
}

.banner img{
	width:100%;
}

.goods_list{
	width:17.75rem;
	height:9.35rem;
	margin:0.5rem auto 0.7rem;
}

.goods_list li{
	float:left;
	width:5.8rem;
	height:9.35rem;
	border-right:1px solid #e7e7e7;
	position:relative;
}

.goods_list li:last-child{

	/*如果想要处理最后一栏多出的边框,可以在列表最后一个子元素给一个border为0px*/
	border-right:0px;
}



.goods_list li .goods_pic{
	display:block;
	width:4.5rem;
	height:4.5rem;
	margin:0.5rem auto 0;

}

.goods_list li .goods_pic img{
	width:100%;
}

.goods_list li .goods_name{

	/*以下共同组成一个当文字过长,可以将超出部分转化为省略号,且不会换行*/
	width:5.0rem;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;

	font:15px/15px 'Microsoft Yahei';
	color:#666;
	margin:0.75rem auto 0;
}

.goods_list li .goods_unit{
	width:5rem;
	font:12px/12px 'Microsoft Yahei';
	color:#bbb;
	margin:0.8rem auto 0;

}

.goods_list li .goods_price{
	width:5rem;
	font:12px/12px 'Microsoft Yahei';
	color:#ff4400;
	margin:0.5rem auto 0;
}

.goods_list li .add_chart{
	position:absolute;
	right:0.675rem;
	bottom:0;
	width:1.7rem;
	height:1.7rem;
	background:url(../images/icons.png) left -27rem no-repeat;
	background-size:3rem 42rem;
}


/*这是响应式布局,当设备宽度发生改变时,可以作出不同的响应,即当宽度增大时,字体过小会导致阅读发生障碍*/
@media (min-width:380px) {

	.goods_list li .goods_price{
		font:14px/14px 'Microsoft Yahei';
	}

	.goods_list li .goods_unit{
		font:14px/14px 'Microsoft Yahei';
	}
}



.footer{
	position:absolute;
	width:100%;
	height:2.5rem;
	background-color:#fff;
	left:0;
	bottom:0;
}

.footer ul{
	height:2.5rem;
}

.footer  li{
	width:25%;
	height:2.5rem;
	float:left;
}

.footer li a{
	display:block;
	width:1.375rem;
	height:1.3rem;
	margin:0.25rem auto 0;
	background:url(../images/icons.png) left -30rem no-repeat;
	background-size:3rem 42rem;
}


.footer li:nth-child(2) a{
	background-position:left -33rem;
}

.footer li:nth-child(3) a{
	background-position:left -36rem;
}

.footer li:nth-child(4) a{
	background-position:left -38.95rem;
}

.footer li h2{
	font:12px/12px 'Microsoft Yahei';
	color:#949392;
	text-align:center;
	margin-top:0.2rem;
}






